<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div> 
            <el-form :model="formInline" ref="formInline" class="formInline" label-width="90px" label-position="right" :rules="rules" slot="form">          
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="formInline.schoolName" style="width:100%" @change='schoolChange'></school>
                            <!--<el-autocomplete v-model="formInline.schoolName" :fetch-suggestions="remoteMethod" :trigger-on-focus="true" placeholder="请输入关键词" @select="querySchool" style="width:100%"></el-autocomplete>-->
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <!--<span class="choose">*</span>-->
                        <el-form-item label="消费时间" class="consumeTime" label-width="85px">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>  
                            <span class="timeState" v-if = "timeState">请选择消费时间</span>           
                        </el-form-item>
                    </el-col>
                    <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                </el-row>
                <!--<el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>-->
            </el-form>

            <div class="table-title" slot="table-title">
            </div>
            <el-table border ref="multipleTable" :data="dataApply"  style="width: 100%" @selection-change="handleSelectionChange">

                    <!--<el-table-column type="index" align="center" width="55"></el-table-column>-->
                   
                    <el-table-column align="center" prop="sCreateTime" label="消费时间"></el-table-column>

                    <el-table-column align="center" prop="sSchoolName"  label="学校名称"></el-table-column>

                    <el-table-column align="center" prop="sCardNumber"  label="卡号"></el-table-column>

                    <el-table-column align="center" label="持卡人姓名">
                        <template scope = "scope">
                            {{scope.row.sStudentName? scope.row.sStudentName: scope.row.sTeacherName? scope.row.sTeacherName: '--'}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sCardholderExueCode"  label="持卡人ID"></el-table-column>

                    <el-table-column align="center" prop="sRemark"  label="消费地点"></el-table-column>

                    <el-table-column align="center" prop="sMoney"  label="金额（元）"></el-table-column>

            </el-table>
            <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
        </TableLayout>

    </div>
</template>

<script>
import { pageExpenseSettlementDetail, querySchoolByName } from 'api/settleManagement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import school from 'components/SchoolClasss/school';
export default{
    name: 'consumeModule',
    components: {TableLayout, school},
    data() {
        return {
            timeState: false,
            formInline: {// form表单数据
                schoolName: '',
                schoolId: '',
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {}
            },
            schoolList: [],
            dataApply: [],
            loading: true,
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                schoolName: [
                    { required: true, message: '学校名称不能为空', trigger: 'blur' }
                ],
                startDate: [
                    { required: true, type: 'date', message: '开始日期不能为空', trigger: 'change' }
                ],
                endDate: [
                    {required: true, type: 'date', message: '结束日期不能为空', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        
        // 查询
        onSubmit(formInline) {// 表单查询
            this.$refs[formInline].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    // console.log('this.formInline.startDate', this.formInline.startDate);
                    if (this.formInline.startDate ==='' || this.formInline.endDate ==='') {
                        this.timeState = true;
                        return;
                    }
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    if (this.formInline.startDate ==='' || this.formInline.endDate ==='') {
                        this.timeState = true;
                        return;
                    }
                    return false;
                }
            });
        },

        // 分页
        handleSizeChange(val) {  
            this.ChangePageSize(val);
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },

         // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            }
            this.timeState = false;
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            }
            this.timeState = false;
        },

        searchFetchData() {
            //  sUserRealName, sCardNo
            let startDate = this.formInline.startDate==''? moment().subtract('8', 'days').format('YYYY-MM-DD'):moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''? moment().format('YYYY-MM-DD'):moment(this.formInline.endDate).format('YYYY-MM-DD');
            if (this.formInline.schoolName !== '') {
                pageExpenseSettlementDetail(
                this.listQuery.page, 
                this.config.pageSize,  
                this.formInline.schoolId,
                startDate,
                endDate
                ).then((response) => {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;   
                });
            } else {
                // this.$message.info('请选择学校');
            }
        },

        // 模糊查询学校名称
        remoteMethod(query, cb) {
            query = query.trim();
            if (query) {
                querySchoolByName(query).then(response => {
                    this.schoolList = response.data.content;
                }).then(() => {
                    let results = this.schoolList.filter(this.createStateFilter(query));
                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(() => {
                        cb(results);
                    }, 200 * Math.random());
                });
            } else {
                cb([]);
            }  
        },
        createStateFilter(query) {
            return (state) => {
                state.value = state.schoolName; 
                return (state.value.toLowerCase().includes(query.toLowerCase()));
            };
        },

        schoolChange(val) {
            this.formInline.schoolId = val; 
        }
        // 选择学校
        // querySchool(val) {

        //     // this.schoolType = val.schoolType;

        //     if(this.formInline.schoolName) {
        //         this.formInline.schoolId = val.schoolId; 
        //     }
        // }
      
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .consumeTime{
        position: relative;
        padding-left: 10px;
        &::before{
            content: "*";
            position: absolute;
            left: 16px;
            top: 10px;
            color: #ff4949;
        }
    }
    .timeState{
        font-size: 12px;
        color: #ff4949;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .withdrawals{
        width:100%;
        background:#fff;
        padding:30px 100px;
        margin-bottom:20px;
        box-shadow: 0px 1px 2px #999;
        -webkit-box-shadow: 0px 1px 2px #999;
        .el-col{
            text-align:left;
            span{
                margin-left:10px;
                font-size:18px;
                display:inline-block;
            }
        }
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>  
